<template>
  <el-dialog :title="title" width="80%" :visible.sync="visible" top="5vh">
    <el-form :inline="true">
      <el-form-item label="商品条码：">
        <el-input v-model="recordInfo.queryForm.barCode" placeholder="输入商品条码" clearable />
      </el-form-item>
      <el-form-item label="商品名称：">
        <el-input v-model="recordInfo.queryForm.goodsName" placeholder="输入商品名称" clearable />
      </el-form-item>
      <el-form-item label="类别：">
        <el-cascader
          v-model="recordInfo.excludeByOrganizationGoodsCategoryId"
          placeholder="请选择类别"
          :props="props"
          clearable
        />
      </el-form-item>
      <el-form-item v-if="showSupplyTargetChain" label="供应连锁机构：">
        <el-select
          v-model="recordInfo.queryForm.supplyTargetChainOrganizationId"
          filterable
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="(item, index) in supplyTargetChainList"
            :key="index"
            :label="item.organizationName"
            :value="item.organizationId"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showSupplier" label="供应商/仓库：">
        <el-select v-model="goodsOrganizationId" filterable placeholder="请选择" clearable>
          <el-option
            v-for="(item, index) in getSupplierListArr"
            :key="index"
            :label="item.organizationName"
            :value="item.supplierOrganizationId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchClick">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="true === showConfirmButton" type="primary" @click="determineClick">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-if="current === 'mini'"
      ref="multipleTable"
      :key="Math.random()"
      v-loading="recordInfo.loading"
      class="table-default"
      :data="recordInfo.list"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="43" align="center" fixed="left" />
      <el-table-column label="商品条码" width="145" prop="barCode" align="center" />
      <el-table-column label="商品名称" prop="goodsName" show-tooltip-when-overflow align="center" />
      <el-table-column label="规格" prop="specifications" width="120" align="center" />
      <el-table-column label="品牌" prop="brandName" width="100" align="center" />
      <el-table-column label="单位" prop="unitText" width="50" align="center" />
      <el-table-column label="现库存" prop="stockQuantity" width="80" align="center" />
      <el-table-column label="商品所属机构" prop="goodsOrganizationName" show-tooltip-when-overflow align="center" />
    </el-table>
    <el-table
      v-if="'app'===current || 'mySupplyGoodsList'===current"
      ref="multipleTable"
      :key="Math.random()"
      v-loading="recordInfo.loading"
      class="table-default"
      :data="recordInfo.list"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="43" align="center" fixed="left" />
      <el-table-column label="商品条码" width="145" prop="barCode" />
      <el-table-column label="商品名称" show-tooltip-when-overflow prop="goodsName" />
      <el-table-column label="单位" width="50" prop="unitText" />
      <el-table-column label="规格" prop="specifications" width="120" />
      <el-table-column label="品牌" width="60" prop="brandName" />
      <el-table-column label="现库存" prop="stockQuantity" width="80" />
      <el-table-column label="进价" prop="chainPurchasePrice" width="60" />
      <el-table-column label="供应商/仓库" prop="supplierOrganizationName" show-tooltip-when-overflow />
      <el-table-column v-if="'mySupplyGoodsList'===current" label="连锁机构" prop="supplyTargetOrganizationName" />
    </el-table>
    <el-table
      v-if="current === 'goods'"
      ref="multipleTable"
      :key="Math.random()"
      v-loading="recordInfo.loading"
      class="table-default"
      :data="recordInfo.list"
      border
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="43" align="center" fixed="left" />
      <el-table-column label="商品条码" prop="barCode" width="140" align="center" />
      <el-table-column label="商品名称" prop="goodsName" show-tooltip-when-overflow align="center" />
      <el-table-column label="品牌" prop="brandName" width="100" align="center" />
      <el-table-column label="规格" prop="specifications" width="120" align="center" />
      <el-table-column label="单位" prop="unitText" width="50" align="center" />
      <el-table-column label="产地" prop="productionPlace" width="100" align="center" />
      <el-table-column label="类别" prop="goodsCategoryName" width="100" align="center" />
    </el-table>
    <el-table
      v-if="current === 'oneGoods'"
      ref="multipleTable"
      :key="Math.random()"
      v-loading="recordInfo.loading"
      class="table-default"
      :data="recordInfo.list"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="商品条码" prop="barCode" width="140" align="center" />
      <el-table-column label="商品名称" prop="goodsName" show-tooltip-when-overflow align="center" />
      <el-table-column label="品牌" prop="brandName" width="100" align="center" />
      <el-table-column label="规格" prop="specifications" width="120" align="center" />
      <el-table-column label="单位" prop="unitText" width="50" align="center" />
      <el-table-column label="产地" prop="productionPlace" width="100" align="center" />
      <el-table-column label="类别" prop="goodsCategoryName" width="100" align="center" />
      <el-table-column
        prop="priceTax"
        label="操作"
        width="60"
        fixed="right"
        align="center"
      >
        <template v-slot="scope">
          <div class="list-operate-menu">
            <el-tooltip class="item" effect="dark" content="选择" placement="top">
              <i class="el-icon-document-checked" @click="confirmSelect(scope.row)" />
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px;"
      background
      :current-page.sync="recordInfo.queryForm.page"
      :page-size.sync="recordInfo.queryForm.pageSize"
      :page-sizes="[5,10,20,30,50,100,200,500]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="recordInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import filters from '@/filters/index'
import permissionMixin from '@/mixins/modules/permission'
import api from '@/api'

export default {
  components: {},
  filters: { ...filters },
  mixins: [permissionMixin],
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            if (node.level === 0) {
              var arr = []
              api.getGoodsCategoryList({ parentId: 0, page: 1, pageSize: 999 }).then(response => {
                response.list.forEach((item, index) => {
                  arr.push(
                    {
                      value: item.goodsCategoryId,
                      label: item.categoryName,
                      leaf: false
                    }
                  )
                })
                resolve(arr)
              })
            }
            if (node.level === 1) {
              // eslint-disable-next-line no-redeclare
              var arr = []
              api.getGoodsCategoryList({ parentId: node.value, page: 1, pageSize: 999 }).then(response => {
                response.list.forEach((item, index) => {
                  arr.push(
                    {
                      value: item.goodsCategoryId,
                      label: item.categoryName,
                      leaf: false
                    }
                  )
                })
                resolve(arr)
              })
            } else if (node.level === 2) {
              // eslint-disable-next-line no-redeclare
              var arr = []
              api.getGoodsCategoryList({ parentId: node.value, page: 1, pageSize: 999 }).then(response => {
                response.list.forEach((item, index) => {
                  arr.push(
                    {
                      value: item.goodsCategoryId,
                      label: item.categoryName,
                      leaf: true
                    }
                  )
                })
                resolve(arr)
              })
            }
          }, 100)
        }
      },
      getSupplierListArr: [],
      supplyTargetChainList: [],
      recordInfo: {
        queryForm: {
          page: 1,
          pageSize: 10,
          returnCount: true,
          orderBy: 'createTimeDesc'
        },
        list: [],
        excludeByOrganizationGoodsCategoryId: null,
        total: 0
      },
      title: '选择商品',
      visible: false,
      handleSelection: [],
      current: '',
      showSupplier: true,
      showSupplyTargetChain: false,
      showConfirmButton: true,
      goodsOrganizationId: '',
      goodsOrganizationName: ''
    }
  },
  computed: {
    ...mapGetters([
      'replenishParseTypeList',
      'purchaseOrderStateList'
    ])
  },
  methods: {
    getGoodsList() {
      this.$api.getGoodsList(this.recordInfo.queryForm).then(response => {
        this.recordInfo.loading = false
        this.recordInfo.list = response.list
        this.recordInfo.total = parseInt(response.count)
      })
      this.$forceUpdate()
    },
    getOnlineShoppingMallGoodsList() {
      this.recordInfo.queryForm.state = 1
      if (undefined !== this.goodsOrganizationId) {
        this.recordInfo.queryForm.goodsOrganizationId = this.goodsOrganizationId
      }
      this.$api.getOnlineShoppingMallGoodsList(this.recordInfo.queryForm).then(response => {
        this.recordInfo.loading = false
        this.recordInfo.list = response.list
        this.recordInfo.total = parseInt(response.count)
      })
    },
    getSupplyGoodsListByToMe() {
      this.recordInfo.queryForm.state = 1
      this.$api.getSupplyGoodsListByToMe(this.recordInfo.queryForm).then(res => {
        this.recordInfo.loading = false
        this.recordInfo.list = res.list
        this.recordInfo.total = parseInt(res.count)
      })
    },
    getSupplyGoodsListByMeSupply() {
      this.recordInfo.queryForm.state = 1
      this.$api.getSupplyGoodsListByMeSupply(this.recordInfo.queryForm).then(res => {
        this.recordInfo.loading = false
        this.recordInfo.list = res.list
        this.recordInfo.total = parseInt(res.count)
      })
    },
    handleSizeChange(e) {
      this.recordInfo.queryForm.pageSize = e
      this.getList()
    },
    handleCurrentChange(e) {
      this.recordInfo.queryForm.page = e
      this.getList()
    },
    getList() {
      if (this.current === 'mini') {
        this.getOnlineShoppingMallGoodsList()
      } else if (this.current === 'app') {
        this.getSupplyGoodsListByToMe()
      } else if (this.current === 'goods') {
        this.getGoodsList()
      } else if (this.current === 'goodsContainPackage') {
        this.current = 'goods'
        this.recordInfo.queryForm.returnPackageGoodsInfo = true
        this.getGoodsList()
      } else if (this.current === 'oneGoods') {
        this.recordInfo.queryForm.returnPackageGoodsInfo = false
        this.getGoodsList()
      } else if (this.current === 'mySupplyGoodsList') {
        this.getSupplyGoodsListByMeSupply()
      }
    },
    getSupplierList() {
      this.$api.getSupplierList({ returnCount: true, page: 1, pageSize: 999 }).then(res => {
        this.getSupplierListArr = res.list
      })
    },
    getSupportSupplyOrganizationByMe() {
      this.$api.getSupportSupplyOrganizationByMe({ returnCount: true, page: 1, pageSize: 999 }).then(res => {
        this.supplyTargetChainList = res.list
      })
    },
    childClick(e, option) {
      this.current = e
      if (e === 'mini') {
        if (undefined !== option && undefined !== option.goodsOrganizationId && option.goodsOrganizationId !== '') {
          this.showSupplier = false
          this.goodsOrganizationId = option.goodsOrganizationId
          this.goodsOrganizationName = option.goodsOrganizationName
          this.title = '选择商品 - ' + option.goodsOrganizationName
        }
      }
      this.showConfirmButton = true
      if (e === 'goods') {
        this.showSupplier = false
      } else if (e === 'oneGoods') {
        this.showSupplier = false
        this.showConfirmButton = false
      } else if (e === 'mySupplyGoodsList') {
        this.showSupplyTargetChain = true
      }
      this.getList()
      if (e !== 'mySupplyGoodsList') {
        this.getSupplierList()
      } else {
        this.getSupportSupplyOrganizationByMe()
      }
      this.visible = true
    },
    handleSelectionChange(e) {
      this.handleSelection = e
    },
    determineClick() {
      if (this.handleSelection.length === 0) {
        this.$message({
          message: '请勾选供应商',
          type: 'warning'
        })
        return
      }
      this.visible = false
      this.$parent.fatherMethodShop(this.handleSelection)
      this.$refs.multipleTable.clearSelection()
    },
    confirmSelect(item) {
      this.visible = false
      this.$parent.fatherMethodShop([item])
    },
    searchClick() {
      if (this.recordInfo.excludeByOrganizationGoodsCategoryId !== null) {
        this.recordInfo.queryForm.excludeByOrganizationGoodsCategoryId = this.recordInfo.excludeByOrganizationGoodsCategoryId[2]
        this.recordInfo.queryForm.goodsCategoryId = this.recordInfo.queryForm.excludeByOrganizationGoodsCategoryId
        // TOOD 不知道是什么情况使用这个参数，暂时去除不提交
        this.recordInfo.queryForm.excludeByOrganizationGoodsCategoryId = undefined
      } else {
        this.recordInfo.queryForm.excludeByOrganizationGoodsCategoryId = undefined
        this.recordInfo.queryForm.goodsCategoryId = undefined
      }
      if (this.current === 'app') {
        if (undefined !== this.recordInfo.queryForm.goodsOrganizationId && this.recordInfo.queryForm.goodsOrganizationId !== '' && this.recordInfo.queryForm.goodsOrganizationId !== '0') {
          this.recordInfo.queryForm.organizationId = this.recordInfo.queryForm.goodsOrganizationId
        }
      }
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>
